<template>
 <div class="userbox">
    <div class="user-header">
      <i class="iconfont icon-fangxiang1" @click="$router.push('/home')"></i>
      <div class="users">个人中心</div>
      <a class="iconfont icon-shezhi" @click="$router.push('/user/shezhi')"></a> <a class="iconfont icon-menu2" @click="flag=!flag"></a>
    </div>
    <div class="cart">
       <div class="cart-grey">
      <el-upload
      class="avatar-uploader"
      :action="uploadURL"
      :show-file-list="false"
      :on-success="after">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <img v-else src="http://h5.cmcmall.com.cn/resources/2B/my-portrait01-7b987deabc.png" alt=""  class="avatar"/>
      </el-upload>
         <div class="cart-username">
           <p>{{username}}</p>
           <p style="color: #c3f9d2;font-size:0.12rem">完善万种药品企业价格问询、采购</p>
         </div>
       </div>
    </div>
    <!-- end of avatar -->
    <div class="pcbd">
          <div class="Purchase"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-caigou"></use></svg><span @click="$router.push('/cart')">采购计划</span></div>
          <div class="Collection"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shoucang"></use></svg><span @click="$router.push('/collection')">我的收藏</span></div>
          <div class="balance"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yue"></use></svg><span @click="$router.push('/wallet')">余额</span></div>
          <div class="Discount"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huoquyouhuijuan"></use></svg><span>优惠券</span></div>
    </div>
    <div class="user-orders">
       <div class="user-order" @click="$router.push('/order/all')">
         <i>采购订单</i><span>全部 &gt; </span>
       </div>
       <div class="user-order-icon">
           <li><i class="iconfont icon-daiqueren"></i><span @click="$router.push('/order/to')">待确认</span></li>
           <li><i class="iconfont icon-dingdanyiqueren"></i><span @click="$router.push('/order/complete')">已确认</span></li>
           <li><i class="iconfont icon-jinhangzhong"></i><span @click="$router.push('/order/await')">进行中</span></li>
           <li><i class="iconfont icon-yiquxiao"></i><span @click="$router.push('/order/evaluate')">待评价</span></li>
           <li><i class="iconfont icon-tuikuan"></i><span>退货/退款</span></li>
       </div>
    </div>
    <div class="user-address">
       <div><svg class="icon" aria-hidden="true"><use xlink:href="#icon-dizhi1"></use></svg><router-link tag='span' to='/address'>管理收货地址</router-link></div>
       <div><svg class="icon" aria-hidden="true"><use xlink:href="#icon-kaipiaoxitong"></use></svg><span>管理开票信息</span></div>
       <div><svg class="icon" aria-hidden="true"><use xlink:href="#icon-suo"></use></svg><span @click="$router.push('/resetPassword')">修改登录密码</span></div>
    </div>
    <div class="guanyu">
       <div><span @click="$router.push('/guanyu')">关于</span><i>＞</i></div>
       <div><span @click="$router.push('/feedback')">帮助与反馈</span><i>＞</i></div>
    </div>
    <div class="user-footer">
      Copyright © 2015-2017 华药电商
    </div>
      <ti-ps v-show="flag"></ti-ps>
   </div>
</template>

<script>
import { uploadAvatar } from '@/utils/api'

export default {
  data () {
    return {
      imageUrl: '',
      login: false,
      username: '未命名',
      userid: '',
      flag: false

    }
  },
  methods: {
    after (res) {
      this.imageUrl = res.url
      // console.log(res.url)
      uploadAvatar(res.url, localStorage.getItem('userid')).then(() => {
        // console.log(1)
      })
    }

  },
  created () {
    this.loginStore().then(res => {
      if (res.code === 200) {
        // console.log(res)
        this.username = res.data.username
        this.userid = res.data.userid
        this.imageUrl = res.data.avatar || null
        localStorage.setItem('login', 'true')
      } else {
        this.$router.replace('/login')
      }
    })
  }
}
</script>

<style lang="scss">
.usersbox{
  display: flex;
  flex-direction: column;
  height: 100%;
}
 .user-header{
   height: 0.44rem;
   border-bottom: 1px solid #f7f3f3;
   display: flex;
   align-items: center;
   justify-content: space-around;
   .users{
     flex:1;
     text-align: center;
     font-size:0.18rem;
   }
   i{
     padding-left: 0.1rem
   }
   a{
     color:#000;
     padding: 0 0.07rem
   }
 }
  .avatar-uploader .el-upload {
    border: 1px solid;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    width: 0.6rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
  }
  .avatar {
    width: 0.6rem;
    height: 0.6rem;
    display: block;
  }
  .cart-grey{
    display: flex;
    justify-content: space-between;
    background: -webkit-linear-gradient(left,#4dd493,#6dd67e);
    background: linear-gradient(90deg,#4dd493,#6dd67e);
    border-radius: .08rem;
    margin: .08rem .05rem .05rem;
    box-shadow: 0 2px 4px #b6b2b2;
    color: #fff;
    padding: .1rem;
    box-sizing: border-box;
    align-items: center;
    height: 1rem;
    .cart-username{
      flex:1;
       text-indent: 0.3rem;
    }
  }
  .pcbd{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 0.7rem;
    padding: 0.2rem 0;
    div{
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size:0.12rem;
      .icon{
        font-size:0.3rem;
        padding: 0.05rem 0;
      }
    }
  }
  .user-orders{
    border-top:0.11rem solid #f7f7f7;
    border-bottom:0.11rem solid #f7f7f7;
    .user-order{
      display: flex;
      padding: 0.07rem 0.14rem;
      padding-right:0.25rem;
      height: 0.48rem;
      align-items: center;
      border-bottom:1px solid #f7f7f7;
      i{
        flex:1;
        font-size:0.14rem;
      }
      span{
        color: #989898;
        font-size:0.12rem;
      }
    }
  }
  .user-order-icon{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.11rem 0;
    li{
      display: flex;
      flex-direction: column;
       justify-content: center;
       text-align: center;
       font-size:0.12rem;
       i{
         font-size: 0.21rem;
         color:#656565;
       }
    }
  }
  .user-address{
     border-bottom:0.11rem solid #f7f7f7;
    div{
      height: 0.44rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-top:1px solid #f7f7f7;
      &:nth-child(1){
        border: 0;
      }
      .icon{
        font-size:0.2rem;
        margin: 0 0.2rem;
      }
      span{
        flex:1
      }
    }
  }
  .guanyu{
    padding: 0 0.15rem;
    div{
      display: flex;
      height: 0.48rem;
      border-bottom:1px solid #f7f7f7;
      align-items: center;
      &:nth-child(2){
        border: 0;
      }
      span{
        flex: 1;
      }
    }
  }
  .user-footer{
    height: 0.6rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:0.12rem;
    color: #989898;
    background: #f7f7f7;
  }
</style>
